<template>
  <el-input
    v-model.trim="inputVal"
    class="w-50 m-2"
    :size="size"
    :clearable="clearable"
    :placeholder="placeholder"
    :autofocus="autofocus"
    :prefix-icon="Search"
    :input-style="inputStyle"
    @change="changeHandler"
    @input="changeHandler"
    @keyup.enter="changeHandler"
  />
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { useDebounceFn } from "@vueuse/core";
const router = useRouter();

// 输入框的值
const inputVal = ref<String>("");
/**
 * @param placeholder   输入框占位文本
 * @param clearable     是否显示清除按钮，只有当 type 不是 textarea时生效
 * @param size          输入框尺寸，只在 type 不为 'textarea' 时有效
 * @param autofocus     原生属性，自动获取焦点
 * @param inputStyle    input 元素或 textarea 元素的 style
 */

const props = defineProps({
  placeholder: {
    type: [String],
    default: "请输入内容",
  },
  clearable: {
    type: [Boolean],
    default: false,
  },
  size: {
    type: [String],
    default: "",
  },
  autofocus: {
    type: [Boolean],
    default: false,
  },
  inputStyle: {
    type: [Object, String],
    default: "",
  },
});
enum EventName {
  INPUT = "input",
  CHANGE = "change",
}
const emits = defineEmits<{
  (event: EventName.CHANGE, data: String): void;
  (event: EventName.INPUT, data: String): void;
}>();

const changeHandler = useDebounceFn((e: String) => {
  console.log(555);
  emits(EventName.CHANGE, e);
  emits(EventName.INPUT, e);
}, 1000);
</script>

<style lang="scss" scoped>
</style>